<template>
    <div id="roleDetailPage">
        <div >
            <el-form ref="roleDetail" :model="roleDetail" class="formEmbedTable mt20">
                <table>
                    <caption>Role Information</caption>
                    <tr>
                        <td>Role Name</td>
                        <td>
                            <el-form-item> {{roleDetail.roleName}}</el-form-item>
                        </td>
                        <td>Role Category</td>
                        <td>
                            <el-form-item> {{$tools.dict.BranchLevel(roleDetail.roleType)}}</el-form-item>
                        </td>					
                    </tr>
                    <tr>
                        <td>Describtion</td>
                        <td colspan="3">
                            <el-form-item >{{roleDetail.roleDesc}}</el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>  
        </div>
        <div class="mt20">
            <ynet-roleTree :menuTree="menuTree"></ynet-roleTree>
        </div>
        <div class="btnArea mt20 tac">
            <el-button type="primary" @click="backMain">Back</el-button>
        </div>
    </div>
</template>
<script>
     import ghbIcon from '@src/components/icon'
    export default {
        name:'roleDetailPage',
        components:{
            ghbIcon
        },
        props:['roleBsnDetail','roleDetail'],
        mounted(){
            //this.menuTree=this.$tools.storage.get("menu", "save")
            this.menuTree=[];
            this.roleBsn=[];
            this.roleBsn=this.roleBsnDetail
            
            //roleBsn.push({"bsnCode":"IM00","bsnName":"首页","url":"/my/myMain","order":"0","level":"1","state":"1","parentBsnCode":"","update":""})
            //console.log("roleBsn:"+JSON.stringify(this.roleBsn))
            //第一次循环,获取一级节点
            for(let i=0;i<this.roleBsn.length;i++){
                //获取一级节点
                //console.log("bsnCode_length"+this.roleBsn[i].bsnCode.length)
                this.roleBsn[i]=$.extend(this.roleBsn[i],{childrens:[]});
                if(this.roleBsn[i].bsnCode.length==4){
                    //let childrens=[];
                    
                    //console.log("roleBsn"+"["+i+"]"+JSON.stringify(this.roleBsn[i]))
                    this.menuTree.push(this.roleBsn[i]);
                    //this.roleBsn.splice(i,1);//去掉已经放到集合中的数据
                }
            }
            //console.log("menuTree1:"+JSON.stringify(this.menuTree))
            //第二个节点循环
            for(let i=0;i<this.roleBsn.length;i++){
                if(this.roleBsn[i].bsnCode.length==6){
                    for(let j=0;j<this.menuTree.length;j++){
                        if(this.roleBsn[i].bsnCode.substring(0,4)==this.menuTree[j].bsnCode){
                            this.menuTree[j].childrens.push(this.roleBsn[i])
                        }
                    }
                }
            }
            //console.log("menuTree2:"+JSON.stringify(this.menuTree))

            //三级菜单
            for(let i=0;i<this.roleBsn.length;i++){
                if(this.roleBsn[i].bsnCode.length==8){
                    for(let j=0;j<this.menuTree.length;j++){//menuTree的长度 j
                        if(this.menuTree[j].childrens.length>0){ //判断第I个menutree下childrens是否有元素
                            for( let k=0;k<this.menuTree[j].childrens.length;k++){//循环childrens中的元素
                                if(this.roleBsn[i].bsnCode.substring(0,6)==this.menuTree[j].childrens[k].bsnCode){
                                    this.menuTree[j].childrens[k].childrens.push(this.roleBsn[i])
                                }
                            }
                        }
                        
                    }
                }
            }
            //console.log("menuTree3:"+JSON.stringify(this.menuTree))
        },
        data(){
            return{ 
                menuTree:[],
                roleBsn:[],
            }
        },
        methods:{
            backMain(){
                this.$emit("backMenu")
            }
        }
    }

</script>
